<template>
<div class="evaluation-management-detail views-container">
    <div class="wlm-form" style="background: #f8f8f8;">
        <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="10" :lg="8" :xl="6">
                <div class="wlm-form flex-col" style="min-height: calc(100vh - 150px);">
                    <div class="wlm-form-header">
                        <p>商品信息</p>
                    </div>
                    <div class="wlm-form-content pannel-left">
                        <div class="flex-col flex-align-c">
                            <img class="pannel-left-img" :src="formFormatData.formData.user.avatarUrl" alt="">
                            <div>{{formFormatData.formData.user.nickName}}</div>
                        </div>
                        <div class="pannel-left-item flex-row" style="margin-top:60px;">
                            <div class="item-left">商品名称：</div>
                            <div class="item-right">{{formFormatData.formData.order_goods.goods_name}}</div>
                        </div>
                        <div class="pannel-left-item flex-row">
                            <div class="item-left">商品分类：</div>
                            <div class="item-right"><span v-if="formFormatData.formData.up_cate">{{formFormatData.formData.up_cate}} - </span>{{formFormatData.formData.cate_name}}</div>
                        </div>
                        <div class="pannel-left-item flex-row">
                            <div class="item-left">用户评分：</div>
                            <div class="item-right">
                                <el-rate v-model="formFormatData.formData.score" :disabled="true" :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
                                </el-rate>
                            </div>
                        </div>
                        <div class="pannel-left-item flex-row">
                            <div class="item-left">评价时间：</div>
                            <div class="item-right">{{formFormatData.formData.create_time}}</div>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="14" :lg="16" :xl="18">
                <div class="wlm-form pannel-right">
                    <div class="wlm-form-header">
                        <p>评价内容</p>
                    </div>
                    <div class="wlm-form-content">
                        <el-form style="padding: 20px 100px;" :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="100px" class="retail-form" label-position="right">
                            <el-form-item label="用户ID">
                                <span style="display: block;line-height: 1.5 !important;">{{formFormatData.formData.user.user_id}}</span>
                            </el-form-item>
                            <el-form-item label="用户">
                                <span style="display: block;line-height: 1.5 !important;">{{formFormatData.formData.user.nickName}}</span>
                            </el-form-item>
                        </el-form>
                        <el-alert v-if="!formFormatData.formData.content" title="还没有评价" center :closable="false" type="warning" style="width:500px;height:150px;">
                        </el-alert>
                        <div class="pannel-right-item flex-row">
                                <div class="flex-row flex-align-s" style="margin-bottom:10px;">
                                    <div class="item-list-first">评论内容</div>
                                    <div class="flex-col">
                                        <div class="item-list-mid">{{formFormatData.formData.content}}</div>
                                        <div class="flex-row flex-warp" v-if="formFormatData.formData.comment_image">
                                            <img class="item-list-img" v-for="(item, index) in formFormatData.formData.comment_image" :key="index" @click="imgOpen(item.file.file_path)" :src="item.file.file_path" alt=""></div>
                                            <div class="flex-row">
                                                <span class="item-list-end">{{formFormatData.formData.create_time}}</span>
                                            </div>
                                        </div>
                                    </div>
                        </div>
                        

                            <el-form style="padding: 10px 100px;" :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="100px" class="retail-form" label-position="right">
                                <el-form-item label="回复内容" v-if="formFormatData.formData.is_reply==1">
                                    <div class="flex-col">
                                        <div class="item-list-mid">{{formFormatData.formData.comment_reply[0]['reply_content']}}</div>
                                        <div class="flex-row">
                                            <span class="item-list-end">{{formFormatData.formData.comment_reply[0]['create_time']}}</span>
                                        </div>
                                    </div>
                                </el-form-item>
                                <el-form-item label="回复内容" class="reply-box" v-if="formFormatData.formData.is_reply==0">
                                    <el-input type="textarea" :autosize="{ minRows: 4}" v-model="beizhu">
                                    </el-input>
                                    <div class="form-help">回复内容用于向用户展示</div>
                                </el-form-item>
                                <el-form-item label="" v-if="formFormatData.formData.is_reply==0">
                                    <el-button type="primary" @click="remarkconf(0)">确定回复</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
            </el-col>
        </el-row>
    </div>
    <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <router-link tag="span" to="/merchandise/evaluationManagement">
            <el-button size="small">返回</el-button>
        </router-link>
    </div>
</div>
</template>

<script>
// import { userAdd } from '@/api/user'
import {
  replyComment,
  getCommentDetail
} from '@/api/merchandise'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'EvaluationManagementDetail',
  components: {

  },
  directives: {

  },
  created() {
    this.ids = [this.$route.query.comment_id]
  },
  computed: {
    // hasMenu() {
    //   return this.formFormatData.formData.menuList.length === 0 && !this.showMenu
    // }
  },
  data() {
    return {
      ids: [],
      beiExist: false,
      beizhu: '',
      showMenu: false,
      radio2: 3,
      formFormatData: {
        key: 'userForm',
        api: {
          editForm: {
            api: getCommentDetail,
            params: {
              id: ''
            },
            redirect: 'comment_id'
          },
          submitForm: getCommentDetail
        },
        formData: {
          cate_name: '',
          create_time: '',
          comment_reply: [{ reply_content: '' }],
          score: 0,
          content: '',
          username: '',
          user: { nickName: '', avatarUrl: '', user_id: '' },
          order_goods: { goods_name: '' },
          comment_image: {},
          is_reply: '',
          up_cate: ''
        },
        rules: {
          // nickname: [{
          //   required: true,
          //   message: '请输入真实姓名',
          //   trigger: 'blur'
          // }]
        }
      }
    }
  },
  methods: {
    imgOpen(data) {
      window.open(data)
    },
    remarkconf() {
      replyComment({ ids: this.ids, content: this.beizhu }).then((response) => {
        console.log(response.data.data)
        const { data: { code = 1 } } = response
        if (code === 1) {
          this.formFormatData.formData.comment_reply[0]['reply_content'] = this.beizhu
          var d = new Date(response.data.data * 1000)
          var newDate = (d.getFullYear()) + '-' +
           (d.getMonth() + 1) + '-' +
           (d.getDate()) + ' ' +
           (d.getHours()) + ':' +
           (d.getMinutes()) + ':' +
           (d.getSeconds())
          this.formFormatData.formData.comment_reply[0]['create_time'] = newDate
          this.formFormatData.formData.is_reply = 1
          this.$message.success('回复成功')
        } else {
          this.$message.success('回复失败')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$menu-icon:#ccc;

.evaluation-management-detail {
    font-size: 14px;

    .color-red {
        color: rgb(245, 108, 108) !important;
    }

    /deep/ .el-form-item__label {
        line-height: 21px !important;
    }

    .pannel-left {
        padding: 0 !important;
        font-size: 16px;
        width: 400px;
        min-height: 640px;
    }

    .pannel-right {
        background: #ffffff;
        border-radius: 3px;
        font-size: 14px;
        min-height: calc(100vh - 150px);
    }

    .pannel-right-header {
        font-size: 15px;
        line-height: 30px;
        border-bottom: 1px solid #e0dddd;
        padding: 10px 20px;
    }

    .pannel-left-img {
        height: 100px;
        width: 100px;
        margin: 120px 0 10px;
        border-radius: 100%;
    }

    .pannel-left-item {
        margin-bottom: 10px;
        padding-right: 20px;

        .item-left {
            width: 100px;
            margin-left: 78px;
            white-space: nowrap;
        }

        .item-right {
            width: 0;
            flex-grow: 1;
        }
    }

    .pannel-right-item {
        padding: 20px 100px;
    }

    .pannel-right-img {
        height: 100px;
        width: 100px;
        margin-right: 40px;
        border-radius: 100%;
    }

    .item-list-first {
        width: 100px;
        padding-right: 20px;
        text-align: right;
    }

    .item-list-mid {
        width: 600px;
        margin-right: 10px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        // -webkit-box-orient: vertical;
        // overflow: hidden;
        line-height: 20px;
        // max-height: 40px;
        margin-bottom: 10px;
    }

    .item-list-img {
        height: 80px;
        width: 80px;
        margin-right: 18px;
        margin-bottom: 10px;
        cursor: pointer;
    }

    .item-list-end {
        width: 140px;
        font-size: 12px;
        color: #ccc;
    }
}
</style>
